<template>
  <el-dialog v-model="show" title="当前驻守人员" :destroy-on-close="true">
    <ProTable :columns="columns" :requestApi="getGarrison" :initParam="initParams" ref="proRef">
      <template #tableHeader>
        <el-button type="primary" @click="addBroker" v-auth="'获取可添加驻守人员'">添加驻守人员</el-button>
      </template>
      <template #avatar="{ row }">
        <el-avatar :src="row.avatar" shape="circle" size="large"></el-avatar>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link @click="release(row)" v-auth="'解绑经纪人'">解除驻守</el-button>
      </template>
    </ProTable>
    <addNewBroker ref="addRef" @success="success"></addNewBroker>
  </el-dialog>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ref, reactive } from "vue";
import { getGarrison } from "@/api/modules/loupan";
import { ElMessage } from "element-plus";
import { releaseBroker } from "@/api/modules/loupan";
import { useHandleData } from "@/hooks/useHandleData";
import addNewBroker from "./addNewBroker.vue";

interface Props {
  id: number;
  getTable?: () => Promise<any>;
}

const props = ref<Props>({
  id: 0
});

const show = ref(false);

const columns: ColumnProps[] = [
  { prop: "avatar", label: "头像", width: 150 },
  { prop: "real_name", label: "姓名", width: 100 },
  { prop: "phone", label: "手机号" },
  { prop: "opera", label: "操作" }
];

const initParams = reactive({ lou_id: 0 });

const open = (params: Props) => {
  if (!params.id || params.id === 0) return ElMessage.warning("请选择楼盘");
  initParams.lou_id = params.id;
  props.value.getTable = params.getTable;
  show.value = true;
};

// 解除驻守
const release = async (row: any) => {
  try {
    await useHandleData(releaseBroker, { broker_id: row.id, lou_id: initParams.lou_id }, "解绑该经纪人");
    await props.value.getTable!();
    show.value = false;
  } catch (error) {}
};

// 添加驻守人员
const addRef = ref<InstanceType<typeof addNewBroker> | null>();
const addBroker = () => {
  addRef.value?.open(initParams.lou_id);
};

// 添加完成
const proRef = ref<InstanceType<typeof ProTable> | null>();
const success = async () => {
  await proRef.value?.getTableList();
  await props.value.getTable!();
};

defineExpose({ open });
</script>

<style></style>
